Format Numbers When editing .tsx files, ensure all user-facing numbers are formatted using the formatNumber utility from @tryghost/shade . Import import { formatNumber } from '@tryghost/shade' ; When to use formatNumber Use formatNumber() when rendering any numeric value that is displayed to the user, including: Member counts, visitor counts, subscriber counts Email engagement metrics (opens, clicks, bounces) Revenue amounts (combine with centsToDollars() for monetary values) Post analytics (views, link clicks) Any count or quantity shown in UI Correct usage < span
{ formatNumber ( totalMembers ) } </ span
< span
{ formatNumber ( link . count || 0 ) } </ span
< span
{
${ currencySymbol } ${ formatNumber ( centsToDollars ( mrr ) ) }} </ span< span
{ post . members
0 ?
+ ${ formatNumber ( post . members ) }: '0' } </ spanAntipatterns to avoid Do NOT use any of these patterns for formatting numbers in TSX files: // BAD: raw .toLocaleString() < span
{ count . toLocaleString ( ) } </ span
// BAD: manual Intl.NumberFormat < span
{ new Intl . NumberFormat ( 'en-US' ) . format ( count ) } </ span
// BAD: raw number without formatting < span
{ memberCount } </ span
// BAD: manual regex formatting < span
{ count . toString ( ) . replace ( / \B (?= ( \d {3} ) + (?! \d ) ) / g , ',' ) } </ span
Related utilities formatPercentage() - for percentages (e.g., open rates, click rates) abbreviateNumber() - for compact notation (e.g., 1.2M, 50k) centsToDollars() - convert cents to dollars before passing to formatNumber All are imported from @tryghost/shade .